<template>
</template>

<script>
	//VueCli环境、vue介绍、vue实例、模板语法、计算属性、样式绑定、条件渲染、列表渲染、事件处理、表单输入绑定
		//计算属性（首次计算的时候会缓存结果，如果依赖的属性没变，下次访问会直接访问到缓存的值）
			export default {
			  data() {
			    return {
			      message: "Hello Vue",
			      firstName: "John",
			      lastName: "Doe"
			    };
			  },
			  computed: {
			    // 1️⃣ 基本计算属性（只读）
			    reversedMessage() {
			      return this.message.split('').reverse().join('');
			    },
			
			    // 2️⃣ 计算属性的 Getter/Setter，需要model才会触发setter，<input v-model="fullName"> <!-- 输入 "李 四" 会触发 setter -->
			    fullName: {
			      get() {
			        return `${this.firstName} ${this.lastName}`;
			      },
			      set(newValue) {
			        [this.firstName, this.lastName] = newValue.split(' ');
			      }
			    }
			  }
			};//计算属性中的依赖怎么看？看实际访问的响应式数据。如果是访问了另一个计算属性，就依赖另一个计算属性，也依赖本来的响应式数据
				//什么是非响应数据呢？
					// 用js代码修改元素不算、用下标的方式修改数组内容不算(用push之类的就算)，data中未声明的属性不算（除了this.$set)
		
</script>

<style>
</style>